<template>
  <div id="frontAdvice" v-cloak>
    <div class="container frontZone">
      <div class="row">
        <div class="col-md-9 col-sm-12 col-xs-12 ">
          <ul class="list-group">
            <li class="list-group-item" v-for="(item,index) in frontData.List" :key="index">
              <div class="row">
                <div class="col-md-2 col-sm-3 col-xs-3 imgZone">
                  <img :src="firstString+item.imgurl" alt="每周一问">
                </div>
                <div class="col-md-10 col-sm-9 col-xs-9">
                  <h3>
                    <strong>
                      <router-link :data="item.id" class="detailTitle" :to="detailUrl1+articleId.id+'/page/'+currentPage+detailUrl2+item.id" @click.native="toDetail($event)">{{item.title}}</router-link>
                      <i><span>{{item.author}}</span>{{item.created_at}}</i>
                    </strong>
                    <strong>
                      <em>
                        <img src="../assets/img/load/zixun_04.png" alt="眼睛" class="likeNum" data="look_num">
                        <span class="likeCount" :num="item.look_num">{{item.look_num}}</span>
                      </em>
                      <em>
                        <img src="../assets/img/cooperate/zixun_03.png" alt="爱心" class="priseNum" data="like_num" @click="likePeopleNum($event)">
                        <span class="priseCount" :num="item.like_num">{{item.like_num}}</span>
                      </em>
                    </strong>
                  </h3>
                  <p class="timeProgress">{{item.content}}</p>
                </div>
              </div>
            </li>
          </ul>
          <nav aria-label="Page navigation">
            <ul class="pagination">
              <li>
                <router-link aria-label="Previous" v-show="currentPage>1" :to="detailUrl1+articleId.id+'/page/'+Number(currentPage-1)" @click.native="getCurrentPage(Number(currentPage-1))">
                  <span aria-hidden="true">上一页</span>
                </router-link>
              </li>
              <li v-for="(val,index) in totalPages" :key="index"><router-link :to="detailUrl1+articleId.id+'/page/'+Number(index+1)" @click.native="getCurrentPage(Number(index+1))">{{index+1}}</router-link></li>
              <li>
                <router-link aria-label="Previous" v-show="currentPage<totalPages" :to="detailUrl1+articleId.id+'/page/'+(Number(currentPage)+1)" @click.native="getCurrentPage(Number(currentPage)+1)">
                  <span aria-hidden="true">下一页</span>
                </router-link>
              </li>
            </ul>
          </nav>
        </div>
        <div class="col-md-3 hideCommon">
          <div class="join">
            <p>学淘宝 就来就问</p>
            <p>您身边靠谱的网店顾问</p>
            <a class="btn btn-success" href="register.html">立即加入</a>
          </div>
          <div class="sort">
            <h5>分类</h5>
            <div class="kinds">
              <a href="#">淘宝运营</a>
              <a href="#">淘宝美工</a>
              <a href="#">淘宝客服</a>
              <a href="#">电商资讯</a>
              <a href="#">直通车</a>
              <a href="#">淘宝客</a>
              <a href="#">手淘</a>
              <a href="#">数据</a>
              <a href="#">每周一问</a>
              <a href="#">店铺装修</a>
            </div>
          </div>
          <div class="sort">
            <h5>培训课程</h5>
            <div class="trainClass">
              <p>
                <span>淘宝运营实操班</span>
                <a href="#">&gt;&gt;立即查看</a>
              </p>
              <p>
                <span>淘宝运营实操班</span>
                <a href="#">&gt;&gt;立即查看</a>
              </p>
              <p>
                <span>淘宝运营实操班</span>
                <a href="#">&gt;&gt;立即查看</a>
              </p>
              <p>
                <span>淘宝运营实操班</span>
                <a href="#">&gt;&gt;立即查看</a>
              </p>
              <p>
                <span>淘宝运营实操班</span>
                <a href="#">&gt;&gt;立即查看</a>
              </p>

            </div>

          </div>
          <div class="attention">
            <p>扫一扫关注就问网络官方微信号!</p>
            <img src="../assets/img/load/zixun_06.png" alt="关注">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

    export default {
        name: "front-advice",
        props:['articleId','frontData','totalPages'],
        data(){
          return{
            firstString:'http://www.gengyong.com.cn',
            detailUrl1:'/advice/type/',
            detailUrl2:'/id/',
            //每篇文章的详情页内容
            detailDatas:{},
            //当前页
            currentPage:1
          }
        },
        methods:{
          //点击页码拿到当前页的数据
          getCurrentPage(current){
            //拿到当前文章的类型
            var id=this.articleId.id;
            /*  console.log('前沿id'+id);
              console.log('前沿page'+current);
              console.log( '前沿页数'+this.totalPages);*/
            //当前页的页码
            this.currentPage=current;
            var _this=this;
            this.$http.get('http://www.gengyong.com.cn/api/advice',{
              params:{
                page:current,
                type:id
              }
            }).then(function(res){
              _this.frontData.List=res.data.info.info;
            }).catch(function(err){
              console.log(err);
            });
          },
          //点击列表页显示对应的详情页
          toDetail(e){
            var detailTitle=e.currentTarget;
            var acticleInfo=detailTitle.parentNode.parentNode.childNodes[2].childNodes[0];
            //每篇文章的ID
            var id=this.$route.params.detailId;
            //console.log(acticleInfo.childNodes.length);//3
            //判断是浏览还是点赞
            var acticleType=acticleInfo.childNodes[0].getAttribute('data');
            //浏览人数
            var lookNum=acticleInfo.childNodes[2].getAttribute('num');

            this.$http.get('http://www.gengyong.com.cn/api/advice-plus',{
              params:{
                id:id,
                type:acticleType,
                num:lookNum
              }
            }).then(function(res){
              console.log(res);
              //浏览量增加1
              var flag=acticleType.childNodes[0].setAttribute('flag');
              if(!flag){
                var count=Number(acticleType.childNodes[2].getAttribute('num'));
                count+=1;
                acticleType.childNodes[2].innerHTML=count;
              }
              console.log(count);
            }).catch(function(err){
              console.log(err);
            });

            //拿到详情页的数据
            this.$store.dispatch('getDetailData',id);
          },
          //点赞,每个用户在一篇文章上只能点一次赞
          likePeopleNum(e){
            var el=e.currentTarget;
            var id=el.parentNode.parentNode.parentNode.childNodes[0].childNodes[0].getAttribute('data');
            var type=el.getAttribute('data');
            var num=el.parentNode.lastChild.innerHTML;
            let flag=el.getAttribute('flag');
            if(!flag){
              this.$http.get('http://www.gengyong.com.cn/api/advice-plus',{
                params:{
                  id:id,
                  type:type,
                  num:num
                }
              }).then((res)=>{

                el.src='../static/img/cooperate/zixun_02.png';
                el.setAttribute('flag',true);
                let count=Number(el.parentNode.lastChild.innerHTML);
                count+=1;
                el.parentNode.lastChild.innerHTML=count;

              }).catch((err)=>{
                console.log(err);
              });
            }
          }
        },
        mounted(){
          //页面加载完成时显示对应页的数据
          this.getCurrentPage(this.$route.params.page);
        }

    }
</script>

<style scoped>
  @import '../assets/css/advice.css';
  [v-cloak] {
    display: none;
  }
</style>
